<template>
  <view 
    class="service-card" 
    :class="{ 'service-card--disabled': disabled, 'service-card--loading': loading }"
    @click="handleClick"
  >
    <view class="service-icon" :style="{ background: themeColor }">
      <u-icon 
        v-if="!loading" 
        :name="iconName" 
        color="#fff" 
        size="24"
        :aria-label="ariaLabel"
      ></u-icon>
      <u-loading-icon v-else size="20" color="#fff"></u-loading-icon>
    </view>
    <view class="service-info">
      <text class="service-title">{{ title }}</text>
      <text class="service-desc">{{ description }}</text>
    </view>
    <view class="service-action">
      <u-icon 
        v-if="showArrow" 
        name="arrow-right" 
        color="#999" 
        size="16"
        aria-label="进入"
      ></u-icon>
      <u-icon 
        v-else-if="badge" 
        :name="badgeIcon" 
        :color="badgeColor" 
        size="16"
        :aria-label="badgeText"
      ></u-icon>
    </view>
  </view>
</template>

<script setup>
/**
 * 服务卡片组件
 * @author Wu.Liang
 * @date 2025-01-21
 * @description 统一的功能入口卡片组件，遵循UI设计规范
 */

import { computed } from 'vue'

// Props定义
const props = defineProps({
  // 卡片标题
  title: { 
    type: String, 
    required: true 
  },
  // 卡片描述
  description: { 
    type: String, 
    required: true 
  },
  // 图标名称
  iconName: { 
    type: String, 
    required: true 
  },
  // 主题色
  themeColor: { 
    type: String, 
    required: true 
  },
  // 是否禁用
  disabled: { 
    type: Boolean, 
    default: false 
  },
  // 是否加载中
  loading: { 
    type: Boolean, 
    default: false 
  },
  // 是否显示箭头
  showArrow: { 
    type: Boolean, 
    default: true 
  },
  // 徽章文本
  badge: { 
    type: String, 
    default: '' 
  },
  // 徽章图标
  badgeIcon: { 
    type: String, 
    default: 'info-circle' 
  },
  // 徽章颜色
  badgeColor: { 
    type: String, 
    default: '#ff4757' 
  }
})

// Emits定义
const emit = defineEmits(['click'])

// 计算属性
const ariaLabel = computed(() => {
  return `${props.title}，${props.description}`
})

const badgeText = computed(() => {
  return props.badge || ''
})

// 点击处理
const handleClick = () => {
  if (props.disabled || props.loading) {
    return
  }
  emit('click')
}
</script>

<style lang="scss" scoped>
.service-card {
  display: flex;
  align-items: center;
  padding: 16px;
  background: white;
  border-radius: 12px;
  margin-bottom: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, opacity 0.3s ease;
  cursor: pointer;
  width: 100%;
  box-sizing: border-box;
  min-height: 80px;
  
  &:active:not(.service-card--disabled):not(.service-card--loading) {
    transform: scale(0.98);
  }
  
  &--disabled {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
  }
  
  &--loading {
    cursor: wait;
  }
  
  .service-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 16px;
    flex-shrink: 0;
  }
  
  .service-info {
    flex: 1;
    min-width: 0; // 防止文本溢出
    
    .service-title {
      display: block;
      font-size: 16px;
      font-weight: 600;
      color: #333;
      margin-bottom: 4px;
      line-height: 1.4;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    
    .service-desc {
      display: block;
      font-size: 14px;
      color: #666;
      line-height: 1.4;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
  
  .service-action {
    flex-shrink: 0;
    margin-left: 12px;
  }
}

// 响应式适配
@media screen and (max-width: 375px) {
  .service-card {
    padding: 12px;
    
    .service-icon {
      width: 40px;
      height: 40px;
      margin-right: 12px;
    }
    
    .service-info {
      .service-title {
        font-size: 15px;
      }
      
      .service-desc {
        font-size: 13px;
      }
    }
  }
}

// 中等屏幕适配
@media screen and (min-width: 376px) and (max-width: 768px) {
  .service-card {
    padding: 16px;
    width: 100%;
    max-width: none;
  }
}

// 大屏幕适配
@media screen and (min-width: 769px) {
  .service-card {
    padding: 20px;
    width: 100%;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
  }
  
  .service-icon {
    width: 56px;
    height: 56px;
    margin-right: 20px;
  }
  
  .service-info {
    .service-title {
      font-size: 18px;
    }
    
    .service-desc {
      font-size: 16px;
    }
  }
}

// 横屏模式
@media screen and (orientation: landscape) and (max-height: 500px) {
  .service-card {
    margin-bottom: 8px;
    
    .service-icon {
      width: 40px;
      height: 40px;
    }
    
    .service-info {
      .service-title {
        font-size: 15px;
        margin-bottom: 2px;
      }
      
      .service-desc {
        font-size: 13px;
      }
    }
  }
}

// 高对比度模式支持
@media (prefers-contrast: high) {
  .service-card {
    border: 2px solid #333;
    
    .service-info {
      .service-title {
        color: #000;
      }
      
      .service-desc {
        color: #333;
      }
    }
  }
}

// 减少动画模式
@media (prefers-reduced-motion: reduce) {
  .service-card {
    transition: none;
    
    &:active:not(.service-card--disabled):not(.service-card--loading) {
      transform: none;
    }
  }
}
</style>
